
<!doctype html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta name="full-screen" content="yes">
        <meta content="default" name="apple-mobile-web-app-status-bar-style">
        <meta name="screen-orientation" content="portrait">
        <meta name="browsermode" content="application">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="x5-orientation" content="portrait">
        <meta name="x5-fullscreen" content="true">
        <meta name="x5-page-mode" content="app">
        <base target="_blank">
        <title>聊天</title>

        <link rel="stylesheet" href="index.css" />
        <!--<link rel="stylesheet" href="css/qq.css" />-->
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/ajaxfileupload.js"></script>
        <link rel="stylesheet" href="css/face.css"/>


        <!--引入CSS-->
        <!--<link rel="stylesheet" type="text/css" href="css/webuploader.css">-->

        <!--引入JS-->
        <script type="text/javascript" src="js/webuploader.js"></script>
    </head>
    <body>
        <img class="abs cover body-bg" width="100%" height="100%">
        <div class="abs cover contaniner">
            <div class="abs cover pnl">
                <div class="abs top pnl-head" id="pnlHead">
                    <div class="pnl-hl" id="userInfo" style="color: white;line-height: 3rem">客户服务</div>
                    <div class="pnl-about" id="pnlAbout" style="width: 20rem;color: white;">
                
                        <span id="myInfo">我是客服</span>
                        
                        
                    </div>
                    <div class="pnl-opt pnl-esc" id="exit"><i class="kh">&#xe802;</i></div>
                    <div class="pnl-opt pnl-min" id="min"><i class="kh">&#xe813;</i></div>
                    <div class="pnl-opt pnl-max" id="max"><i class="kh">&#xe814;</i></div>
                    <div class="pnl-opt pnl-voice" id="voicebtn"><i class="kh" id="voice">&#xE801;</i></div>
                </div>
            
                <div class="abs cover pnl-body" id="pnlBody">
                    <div class="abs cover pnl-left">
                        <div id="all-show">
                            <div class="abs cover pnl-msgs scroll show_talk" id="show">
                                <div class="msg min time" id="histStart">加载历史消息</div>
                                <div class="pnl-list" id="hists">
                                    <!-- 历史消息 -->
                                </div>
                            </div>
                        </div>

                        <div class="abs bottom pnl-text">
                            <div class="abs bottom pnl-ext hide" id="pnlExt">
                                <div class="emoji-pnl scroll hide" id="emojiPnl">
                                    <!-- <img class="emoji-item" key="/::<>" src="http://static.v5kf.com/images/emoji/qq/2009426203723341.gif" />
                                    <img class="emoji-item" key="/::<>" src="http://static.v5kf.com/images/emoji/qq/2009426203723341.gif" /> -->
                                </div>
                            </div>

                            <div class="abs top pnl-warn" id="pnlWarn">
                                <div class="fl btns rel pnl-warn-free">

                                    <a href="javascript:;" id="face">表情</a>
                                    <span id="left"></span>
                                    <!--<button id="picker">选择文件</button>-->
                                    <!--<i class="kh warn-btn emoji-btn emotion" title="表情" id="emojiBtn">表情</i>-->
                                    <!--<i class="kh warn-btn menu-btn" title="菜单" id="menuBtn">&#xe821;</i>-->
                                    <!--<i class="kh warn-btn send-btn" style="display:none;" title="发送" id="sendBtn">&#xe839;</i>-->
                                    <!--<i class="kh warn-btn mute-btn" title="静音" id="muteBtn">&#xe801;</i>-->
                                </div>
                                <div id="uploader" class="wu-example" style="display: none">
                                    <!--用来存放文件信息-->
                                    <div id="fileList" class="uploader-list"></div>
                                    <div class="btns">


                                    </div>
                                </div>
                            </div>
                            <div class="abs cover pnl-input">
                                <textarea  id="text"  spellcheck="false"></textarea>
                                <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                    <ul class="atcom" id="atcom">
                                        <!-- <li class="atcom-item">这是一个问题？</li> -->
                                    </ul>
                                </div>
                            </div>
                            <div class="abs br pnl-btn" id="submit" onclick="sendMsg()">发送</div>
                            <div class="abs cover input-mask hide" id="recon">
                                <div class="recon-tip" id="distype">
                                    <span id="closeTip">因长时间未活动会话已关闭</span>，您可以<i id="refresh"> 刷新 </i>或<i id="startChat"> 继续对话 </i>
                                </div>
                            </div>
                            <div class="pnl-support" id="copyright"><a>DH</a></div>
                        </div>

                    
                    </div>
                    <div class="abs right pnl-right">
                        <div class="slider-container hide"></div>
                        <div class="pnl-right-content">
                            <div class="pnl-tabs">
                                <div class="tab-btn active" id="hot-tab">会话列表<span id="online_number" style="color:red;"></span></div>
                               <!--  <div class="tab-btn" id="rel-tab">相关问题</div> -->
                            </div>
                            <div class="pnl-hot">
                                <ul class="rel-list unselect" id="chat-list">
                                </ul>
                            </div>
                            <div class="pnl-rel" style="display: none;">
                                <ul class="rel-list unselect" id="rels">
                                    <!-- <li class="rel-item">这是一个问题，这是一个问题？</li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>

        <script src="js/ws_chat.js"></script>
        <script src="jquery.qqface.min.js"></script>
        <script src="js/face.js"></script>
        <script src="js/paste-upload-image.js"></script>
        <script>
            $("#text").pasteUploadImage("http://swoole.upload.guardevil.cn/upload.php");
        </script>
    </body>
</html>